<template>
  <ul id="dib1">
    <router-link to="/">
      <li>
        <img class="youdao-a" src="../assets/images/20.jpg" alt="" />
      </li>
    </router-link>

    <router-link to="/Home">
      <li>
        <p><img src="../assets/images/21.jpg" alt="" /></p>
        <h5>视频</h5>
      </li>
    </router-link>

    <router-link to="/Studay">
      <li>
        <p><img src="../assets/images/22.jpg" alt="" /></p>
        <h5>学习</h5>
      </li></router-link
    >

    <router-link to="/Fanyi">
      <li>
        <p><img src="../assets/images/23.jpg" alt="" /></p>
        <h5>翻译</h5>
      </li></router-link
    >

    <router-link to="/denglu">
      <li>
        <p><img src="../assets/images/24.jpg" alt="" /></p>
        <h5>会员</h5>
      </li></router-link
    >
  </ul>
</template>

<script>
export default {};
</script>

<style>
#dib1 {
  width: 100%;
  height: 0.6rem;
  background-color: white;
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0rem;
  z-index: 100;
}
h5 {
  color: #000;
}
#dib1 li {
  list-style: none;
  width: 0.68rem;
  height: 100%;
  font-size: 0.18rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#dib1 li p span {
  font-size: 0.3rem;
}
#dib1 li p:hover span {
  color: #f8df25;
}
.youdao-a {
  margin-top: 0.1rem;
}
#dib1 li p {
  margin-top: 0.05rem;
}
</style>